<template>
	<view>
		<uni-popup ref="popupPostBath" @change="clearn">
			<view class="bg-white post-pop-main pt20 plr30 pb46">
				<view class="flex-between alcenter">
					<view class="ft36">
						请确认以下信息
					</view>
					<image  src="@/static/qw@2x.png" @click="$refs.popupPostBath.close()" class="close-image "></image>
				</view>
				<view class="flex mt12">
					<image v-if="race.image" :src="race.image.file_path"  mode='widthFix' class="post-img-main"></image>
					<image v-else src="../../../static/default_img/default.png"  mode="widthFix" class="post-img-main"></image>
					<view class="post-pop-right">
						<view>{{race.goods_name}}</view>
						<view class="flex-between alcenter mt10">
							<view class="c_919191">面值</view>
							<view class="ft50 c_F71D1D">{{static_obj(goods_sku.face_value === "0.00"?custom_yes:goods_sku.face_value)}}</view>
						</view>
						<view class="flex-between alcenter mt10">
							<view class="c_919191">数量</view>
							<view class="ft50 c_F71D1D">{{type==='one'?'1':repetiton.old_line}}<text class="c_000 ft30">张</text></view>
						</view>
						<view v-if="type === 'bath'" class="ft30 c_F71D1D">存在{{repetiton.repetiton}}张重复，实际提交{{repetiton.line}}张,总面值{{Number(static_obj(goods_sku.face_value === "0.00"?custom_yes:goods_sku.face_value)) * Number(repetiton.old_line)}}元</view>
					</view>
				</view>
				<view class="mt20 ft24">
					<view class="flex ">
						<view class="null-select" :class="{'avtive':artil1}" @click="clikcAttrefs(1)"></view>
						<view class="ml70" @click="clikcAttrefs(1)">我已阅读、理解并接受【<text  @click.stop="$fxLink.checkProtocol(3)" class="c_0eb6ff">礼品卡回收协议</text>】</view>
					</view>
					<view class="flex mt20" @click="clikcAttrefs(2)">
						<view class="null-select" :class="{'avtive':artil2}"  ></view>
						<view class="ml70">我已确认该卡号卡密<text class="c_F71D1D">来源合法，如有问题，本人愿意承担一切法律责任。</text></view>
					</view>
					<view class="flex mt20" v-if="kind.name!= '话费卡' && kind.name!= '加油卡'" @click="clikcAttrefs(3)">
						<view class="null-select" :class="{'avtive':artil3}" ></view>
						<view class="ml70" >我已确认该卡<text class="c_F71D1D">面值</text>准确无误，<text class="c_F71D1D">如有面值错误余额将无法退还！损失自行承担</text></view>
					</view>
				</view>
				<view class="pop-center-button mt30" @click="postOrder_obj">确认提交</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupWrappertc_Face" :is-mask-click="false" @change="closeFacea">
			<view class="bg-white order-face-main text-center">
				<view class="flex alcenter " style="justify-content: right;">
					<image src="@/static/qw@2x.png" class="close-image" @click="artil2 = false;closeFace()"></image>
				</view>
				<view class="error-image">?</view>
				<view class="ft32 font-bold mt12">请确认该卡的面值是否准确无误？</view>
				<view class="mt40">
					<view class="flex select-item alcenter" @click="clikcFace(1)">
						<view class="mr20">
							<view class="null-select" style="position: relative;" :class="{'avtive':faceF}" ></view>
						</view>
						<view class="ft26 text-left">
							否,该卡面值与我选择面值不一致。
						</view>
					</view>
					<view class="flex select-item alcenter mt20" @click="clikcFace(2)">
						<view  class="mr20">
							<view class="null-select " style="position: relative;" :class="{'avtive':faceT}"  ></view>
						</view>
						<view class="ft26 text-left">
							是,该卡面值与实际相符，<text class="c_F71D1D">如有面值错误我愿承担一切损失。</text>
						</view>
					</view>
				</view>
				<view class="pop-center-button mt60 ft32 " v-if="faceF" @click="getBack">返回</view>
			</view>
		</uni-popup>
		<uni-popup ref="order_success">
			<view class="bg-white rounded16 success-main text-center">
				<image src="@/static/qw@2x.png" class="lcose-img" @click="closeOrderSuccess"></image>
				<view class="window-add">
					<view class="item"></view>
				</view>
				<view class="success_msg">提交订单成功</view>
				<view class="ft30 mt24 c_ccc">您的订单已经成功提交，平台将尽快处理！订单进度将通过微信公众号向您实时推送，敬请关注！感谢您的支持！</view>
				<view class="hyou">
				    <view class="hyou-left" hover-class="itemActive" @click="closeOrderSuccess()">
				        <view class="invitation2">
				        </view>
				        <view class="text" >
				         继续提交   
				        </view>
				    </view>
				    <view class="hyou-left" hover-class="itemActive1" @click="openOrder()">
				        <view class="invitation3">
				        </view>
				        <view class="text">
				         查看订单   
				        </view>
				    </view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="order_error">
			<view class="bg-white rounded16 success-main text-center">
				<image src="@/static/qw@2x.png" class="lcose-img" @click="closeOrderError"></image>
				<view class="add order-err" style="">
					<view class="add_err"></view>
				</view>
				<view class="success_msg">提交订单失败</view>
				<view class="ft30 mt24 c_ccc">您提交的订单因{{msg?msg:"提交订单异常"}}{{!msg?"，提交失败，请重新提交或联系客服":""}}</view>
				<view class="hyou">
				    <view class="hyou-left" hover-class="itemActive" @click="closeOrderError()">
				        <view class="invitation2">
				        </view>
				        <view class="text" >
				         确认   
				        </view>
				    </view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default{
		props: {
			kind:{
				type:Object,
				default:{}
			},
		},
		data(){
			return{
				goods_sku:{},
				race:{},
				custom_yes:"",
				type:"",
				repetiton:{},
				old_line:0,
				artil1:false,
				artil2:false,
				artil3:false,
				faceF:false,
				faceT:false,
				msg:""
			}
		},
		onShow() {
			
		},
		methods:{
			openOrder(){
				uni.switchTab({
					url:"/pages/order/order"
				})
			},
			closeOrderSuccess(){
				this.$refs.order_success.close()
			},
			closeOrderError(){
				this.$refs.order_error.close()
			},
			handPostSuccess(){
				this.$refs.order_success.open('center')
			},
			handPostError(msg){
				this.msg = msg
				this.$refs.order_error.open('center')
			},
			getBack(){
				this.closeFacea()
				this.closeFace()
				this.clearn()
				this.$toast('请选择正确的面值')
				this.$refs.popupPostBath.close()
			},
			closeFacea(){
				this.faceF = false
				this.faceT = false
			},
			clearn(){
				this.artil1= false
				this.artil2 = false
				this.artil3 = false
			},
			clikcFace(type){
				if(type === 1){
					this.faceF = true
					this.faceT = false
				}else{
					this.faceF = false
					this.faceT = true
					this.artil3 = true
					this.closeFace()
				}
			},
			closeFace(){
				this.$refs.popupWrappertc_Face.close()
			},
			clikcAttrefs(index){
				if(index === 1){
					this.artil1 = !this.artil1
				}
				if(index === 2){
					if(this.kind.name === '话费卡' || this.kind.name === '加油卡'){
						if(!this.attrefs1){
							this.$refs.popupWrappertc_Face.open('center')
						}
						
					}
					this.artil2 = !this.artil2
				}
				if(index === 3){
					this.artil3 = !this.artil3
				}
			},
			static_obj(str){
				str = String(str)
				let num = str.indexOf('.')
				if(num != -1){
					str = str.substring(0,num)
					return str
				}else{
					return str
				}
			},
			openDeal(type){
				if(type === 1){
					uni.navigateTo({
						url:"/pages/protocol/recycle"
					})
				}else{
					uni.navigateTo({
						url:"/pages/deal/declrea"
					})
				}

			},
			postOrder_obj(){
				if(this.artil1 && this.artil2 && this.artil3){
					// this.$refs.popupPostOne.close();
					// this.$refs.popupPostBath.close()
					this.$emit('postTj')
					this.$refs.popupPostBath.close()
				}else{
					if(!this.artil1){
						this.$toast("请阅读、理解并接受充值卡转让服务协议")
						return
					}else if (!this.artil2){
						this.$toast("请确认该卡号卡密来源合法")
						return
					}else if (!this.artil3){
						this.$toast("请确认改卡面值准确无误")
						return
					}
				}
			},
			batchOpen(goods_sku,race,custom_yes,type,repetiton){
				this.goods_sku = goods_sku
				this.race = race
				this.custom_yes = custom_yes
				this.type = type
				this.repetiton = repetiton
				this.$refs.popupPostBath.open('bottom')
			}
		}
	}
</script>

<style lang="scss">
	.post-pop-main{
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
	}
	.post-img-main{
		height: 100rpx;
		width: 100rpx;
	}
	.post-pop-right{
		border-bottom: 1rpx solid #f1f1f1;
		padding-bottom: 20rpx;
		font-size: 30rpx;
		margin-left: 20rpx;
		width: 100%;
	}
	.null-select{
		position: absolute;
	}
	.close-image{
		width: 40rpx;
		height: 40rpx;
	}
	.order-face-main{
		width: 70%;
		margin: 0 auto;
		border-radius: 14rpx;
		padding: 48rpx 38rpx ;
	}
	.order-face-main .error-image{
		width: 100rpx;
		height: 100rpx;
		border-radius: 100%;
		margin: 0 auto;
		color: #fff;
		background-color: #f85745;
		box-shadow: -1px 4px 11px 0 rgba(255,140,142,.4);
		line-height: 100rpx;
		font-size: 50rpx;
	}
	.success-main{
		padding: 50rpx 30rpx;
		padding-top: 100rpx;
		width: 540rpx;
		margin: 0 auto;
	}
	.window-add .item{
		width: 45rpx;
		height: 25rpx;
		display: inline-block;
		border: 2rpx solid #FFFFFF;
		border-width: 0 0 6rpx 6rpx;
		transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg); 
		-o-transform: rotate(-45deg);
		vertical-align: baseline;
		position: absolute;
		left: 30%;
		top: 30%;
	}
	.waring-add{
		box-shadow: -1px 4px 11px 0 rgba(250,211,20,.4);
		width: 110rpx;
		height: 110rpx;
		display: inline-block;
		border-radius: 100%;
		background-color: #fadd14;
		position: relative;
		line-height: 110rpx;
	}
	.lcose-img{
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}
	.window-add{
		width: 110rpx;
		height: 110rpx;
		display: inline-block;
		border-radius: 100%;
		background-color: #9c8446;
		position: relative;
	}
	.add{
	
		border-radius: 100%;
		display: inline-block;
		padding: 30rpx;
		padding-bottom: 20rpx;
	}
	.order-err{
		background-color:#E51723;
		box-shadow: -1px 4px 11px 0px rgba(255, 140, 142, 0.4);
	}
	.add_err{
		width: 60rpx;
		height: 60rpx;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	.add_err::after{
		width: 100%;
		position: absolute;
		height: 5rpx;
		background: #fff;
		content: "";
		top: 20rpx;
		left: 0;
		transform: rotate(134deg);
		-ms-transform: rotate(134deg);
		-moz-transform: rotate(134deg);
		-webkit-transform: rotate(134deg);
		-o-transform: rotate(134deg);
	}
	.add_err::before{
		width: 100%;
		position: absolute;
		height: 5rpx;
		background: #fff;
		content: "";
		top:20rpx;
		right: 0;
		transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform: rotate(45deg);
	}
	.success_msg{
		margin-top: 26rpx;
	}
</style>